<template>
	<view class="tiku__page">
		<view class="tabs__group">
			<template v-for="(tab,index) in tabs">
				<view @click="tabItemClickHandler(index)" :class="['item',{active:activeTab===index}]" :key="index">{{tab.cname}}</view>
			</template>
		</view>
		<template v-if="login">
			<tiaozhan v-if="activeTab===0"></tiaozhan>
			<meizhou v-if="activeTab===1"></meizhou>
			<zhuanxiang v-if="activeTab===2"></zhuanxiang>
			<my v-if="activeTab===3"></my>
		</template>

		<view v-if="!login" class="tip__item">
			请先登录
		</view>
	</view>
</template>

<script>
	import tiaozhan from './components/tiaozhan.vue';
	import meizhou from './components/meizhou.vue';
	import zhuanxiang from './components/zhuanxiang.vue';
	import my from './components/my.vue';

	export default {
		components: {
			tiaozhan,
			meizhou,
			zhuanxiang,
			my,
		},
		data() {
			return {
				login: getApp().globalData.userId,
				// '挑战答题', '每周答题','专项答题','我的题库'
				tabs: [{
					cname: '挑战答题'
				}, {
					cname: '每周答题'
				}, {
					cname: '专项答题'
				}, {
					cname: '我的题库'
				}, ],
				activeTab: 0,
				tests: [],
			};
		},
		onShow() {
			this.login = getApp().globalData.userId
			console.log(getApp().tikuPage)
			this.activeTab = getApp().tikuPage
		},
		// onLoad(option) {
		// 	// this.activeTab = option.page;
		// 	// console.log(this.activeTab)
		// 	console.log(getApp().tikuPage)
		// 	this.activeTab = getApp().tikuPage
		// },
		// created() {
		// 	// this.main();
		// },
		methods: {
			async main() {
				await this.getCats()
				await this.getTestByCat(this.tabs[this.activeTab].cid)
			},
			tabItemClickHandler(index) {
				this.activeTab = index;
			},
			async getCats() {
				const [state, result] = await this.$https({
					url: '/wechat/getcats',
					method: 'GET'
				})
				this.tabs = result.data.data;
			},
			async getTestByCat(cid) {
				const [state, result] = await this.$https({
					url: '/wechat/gettestbycat',
					method: 'POST',
					data: {
						cid
					}
				})
				this.tests = result.data.data;
			}
		}
	}
</script>

<style lang="scss">
	$tab_margin:15px;

	.tip__item {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 12px;
		color: #aaa;
	}

	.tiku__page {
		background-color: #F1F1F1;
		min-height: 100vh;

		.tabs__group {
			display: flex;
			overflow-x: auto;
			background-color: #fff;

			.item {
				width: 100%;
				margin: $tab_margin 0;
				padding: 0 10px;
				position: relative;
				text-align: center;
				border-right: 1px solid #ddd;
				font-size: 14px;
				white-space: nowrap;
			}

			.active {
				color: $miva-color-base;

				&::after {
					content: '';
					width: 30px;
					height: 5px;
					display: block;
					position: absolute;
					bottom: -$tab_margin;
					left: 50%;
					transform: translateX(-50%);
					border-radius: 30px;
					background-color: $miva-color-base;
				}
			}
		}

		.body__group {
			padding: 20px;
		}
	}

	.lianxi-btn__item {
		width: 25vw;
		height: calc(25vw / (192 / 54));
		position: absolute;
		right: 5%;
		bottom: 16%;
	}

	.tip_1_item {
		position: absolute;
		right: 12%;
		bottom: 21%;
		font-size: 24rpx;
		color: $miva-color-base !important;
		font-weight: bold;
	}
</style>
